import React from 'react';
import { Modal, Descriptions, Image, Tag, Button, Space, Statistic, Row, Col, Card, Typography } from 'antd';
import { PlayCircleOutlined, TrophyOutlined, ClockCircleOutlined, UserOutlined } from '@ant-design/icons';
import moment from 'moment';

const { Text, Title } = Typography;

interface GamePreviewProps {
  visible: boolean;
  game?: LEARNING.GameContentModel;
  onCancel: () => void;
}

const GamePreview: React.FC<GamePreviewProps> = ({ visible, game, onCancel }) => {
  if (!game) return null;

  // 游戏类型标签颜色映射
  const typeColorMap = {
    pronunciation: 'blue',
    vocabulary: 'green',
    grammar: 'orange',
    listening: 'purple',
    reading: 'cyan',
  };

  // 状态标签颜色映射
  const statusColorMap = {
    active: 'green',
    inactive: 'orange',
    testing: 'blue',
  };

  // 类型映射
  const typeMap = {
    pronunciation: '发音练习',
    vocabulary: '词汇学习',
    grammar: '语法练习',
    listening: '听力训练',
    reading: '阅读理解',
  };

  // 状态映射
  const statusMap = {
    active: '启用',
    inactive: '禁用',
    testing: '测试中',
  };

  // 难度映射
  const difficultyMap = {
    easy: '简单',
    medium: '中等',
    hard: '困难',
  };

  const difficultyColorMap = {
    easy: 'green',
    medium: 'orange',
    hard: 'red',
  };

  return (
    <Modal
      title={
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <PlayCircleOutlined style={{ fontSize: 20 }} />
          <div>
            <div>游戏预览</div>
            <div style={{ fontSize: '12px', color: '#666' }}>{game.title}</div>
          </div>
        </div>
      }
      open={visible}
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
      ]}
      width={900}
      destroyOnClose
    >
      <div style={{ marginBottom: 24 }}>
        {/* 游戏封面和基本信息 */}
        <Row gutter={24} style={{ marginBottom: 24 }}>
          <Col span={8}>
            <div style={{ textAlign: 'center' }}>
              <Image
                src={game.cover_image}
                alt={game.title}
                width="100%"
                style={{ borderRadius: 8, maxHeight: 200, objectFit: 'cover' }}
                fallback=""
              />
              <div style={{ marginTop: 16 }}>
                <Space>
                  <Tag color={typeColorMap[game.type]}>
                    {typeMap[game.type]}
                  </Tag>
                  <Tag color={difficultyColorMap[game.difficulty]}>
                    {difficultyMap[game.difficulty]}
                  </Tag>
                  <Tag color={statusColorMap[game.status]}>
                    {statusMap[game.status]}
                  </Tag>
                </Space>
              </div>
            </div>
          </Col>
          <Col span={16}>
            <Title level={3} style={{ margin: '0 0 16px 0' }}>
              {game.title}
            </Title>
            <Text type="secondary" style={{ fontSize: '16px', lineHeight: '1.6' }}>
              {game.description}
            </Text>
          </Col>
        </Row>

        {/* 统计信息 */}
        <Row gutter={16} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="游戏次数"
                value={game.play_count || 0}
                prefix={<PlayCircleOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="平均分数"
                value={game.average_score || 0}
                precision={1}
                prefix={<TrophyOutlined />}
                suffix="分"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="完成率"
                value={Math.round((game.completion_rate || 0) * 100)}
                suffix="%"
                prefix={<UserOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="预计时长"
                value={game.estimated_duration || 0}
                suffix="分钟"
                prefix={<ClockCircleOutlined />}
              />
            </Card>
          </Col>
        </Row>

        {/* 游戏规则 */}
        {game.game_rules && (
          <Card title="游戏规则" style={{ marginBottom: 16 }}>
            <div style={{ whiteSpace: 'pre-wrap', lineHeight: '1.6' }}>
              {game.game_rules}
            </div>
          </Card>
        )}

        {/* 操作说明 */}
        {game.instructions && (
          <Card title="操作说明" style={{ marginBottom: 16 }}>
            <div style={{ whiteSpace: 'pre-wrap', lineHeight: '1.6' }}>
              {game.instructions}
            </div>
          </Card>
        )}

        {/* 提示信息 */}
        {game.hints && (
          <Card title="提示信息" style={{ marginBottom: 16 }}>
            <div style={{ whiteSpace: 'pre-wrap', lineHeight: '1.6' }}>
              {game.hints}
            </div>
          </Card>
        )}

        {/* 游戏配置 */}
        {game.game_config && (
          <Card title="游戏配置" style={{ marginBottom: 16 }}>
            <pre style={{ 
              background: '#f5f5f5', 
              padding: 16, 
              borderRadius: 4, 
              overflow: 'auto',
              fontSize: '12px',
              lineHeight: '1.4'
            }}>
              {JSON.stringify(JSON.parse(game.game_config || '{}'), null, 2)}
            </pre>
          </Card>
        )}

        {/* 详细信息 */}
        <Descriptions title="详细信息" column={2} bordered>
          <Descriptions.Item label="游戏ID">{game.id}</Descriptions.Item>
          <Descriptions.Item label="游戏名称">{game.title}</Descriptions.Item>
          <Descriptions.Item label="游戏类型">
            <Tag color={typeColorMap[game.type]}>
              {typeMap[game.type]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="难度等级">
            <Tag color={difficultyColorMap[game.difficulty]}>
              {difficultyMap[game.difficulty]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={statusColorMap[game.status]}>
              {statusMap[game.status]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="是否推荐">
            {game.is_featured ? '是' : '否'}
          </Descriptions.Item>
          <Descriptions.Item label="最高分数">
            {game.max_score || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="及格分数">
            {game.min_pass_score || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="最大尝试次数">
            {game.max_attempts || '不限制'}
          </Descriptions.Item>
          <Descriptions.Item label="允许重玩">
            {game.allow_replay ? '是' : '否'}
          </Descriptions.Item>
          <Descriptions.Item label="显示排行榜">
            {game.show_leaderboard ? '是' : '否'}
          </Descriptions.Item>
          <Descriptions.Item label="排序权重">
            {game.sort_order || 0}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {moment(game.created_at).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            {moment(game.updated_at).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="游戏标签" span={2}>
            {game.tags && game.tags.length > 0 ? (
              <Space wrap>
                {game.tags.map((tag, index) => (
                  <Tag key={index}>{tag}</Tag>
                ))}
              </Space>
            ) : '-'}
          </Descriptions.Item>
        </Descriptions>

        {/* 预览提示 */}
        <div style={{ 
          marginTop: 24, 
          padding: 16, 
          background: '#f6ffed', 
          border: '1px solid #b7eb8f',
          borderRadius: 6 
        }}>
          <h4 style={{ margin: '0 0 8px 0', color: '#52c41a' }}>预览说明</h4>
          <ul style={{ margin: 0, paddingLeft: 20, color: '#666' }}>
            <li>此预览仅显示游戏的基本信息和配置</li>
            <li>实际游戏体验需要在前端应用中进行</li>
            <li>游戏配置采用JSON格式，请确保格式正确</li>
            <li>统计数据会根据用户游戏情况实时更新</li>
          </ul>
        </div>
      </div>
    </Modal>
  );
};

export default GamePreview;
